<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="btns">
          <button data-path="news">新闻</button>
          <button data-path="play">娱乐</button>
          <button data-path="game">游戏</button>
        </div>
        <div class="container"></div>
    
</body>
<script>
    const oContainer=document.querySelector(".container")
    //1.书写一个路由表,在实现路由的时候,按照这个路由表的映射关系决定
    const routes = [
        { path: "/news", content: "我是新闻模块" },
        { path: "/play", content: "我是娱乐模块" },
        { path: "/game", content: "我是游戏模块" },
      ];
      const oBtns = document.querySelectorAll(".btns button");
      for(var i=0;i<oBtns.length;i++){
        oBtns[i].onclick=function(){
            location.hash="#"+this.dataset.path;
        }
      }
      //3. 监听hash的改变,根据路由表加载对应的视图
      window.onhashchange=function(){
        routes.forEach((item)=>{
            if(item.path.slice(1)===location.hash.slice(1)){
                oContainer.textContent=item.content
            }
      })
      }
</script>
</html>